Configurações do Webchat

Neste documento, abordaremos as opções de configuração específicas para o canal "WebChat".

Dentro da aba “Canais”, selecione a opção “WebChat”. Ao acessar essa opção, você verá uma tela semelhante à seguinte:

Explicando os campos

• Título do bot: nome exibido no cabeçalho do "WebChat".

• Ícone: imagem clicável para abrir e fechar o "WebChat" (deve ter 80x80 pixels).

• Cor principal: define a cor do cabeçalho e do fundo das mensagens enviadas pelo cliente.

• Cor secundária: define a cor do fundo das mensagens enviadas pelo bot.

• Cor do texto principal: define a cor do texto das mensagens enviadas pelo cliente.

• Cor de texto secundária: define a cor do texto das mensagens enviadas pelo bot.

• Tamanho do ícone (px): ajusta o tamanho do ícone clicável do "WebChat" (entre 40 e 100 pixels).

• Notificações sonoras: ativa sons a cada nova mensagem enviada ou recebida.

• Desabilitar anexos: impede o envio de arquivos e documentos (desativa o clipe de anexos).

• Rodapé: mensagem exibida no rodapé do "WebChat".

• URL: link para onde o cliente será direcionado ao clicar no rodapé.

• Ocultar GTag Ligo: impede a inserção da tag do Google Analytics da Ligo (somente o root pode modificar essa opção).

• Monitoramento de presença do cliente: ativa o monitoramento da conexão do socket, notificando o operador humano caso o cliente fique offline.

  • Intervalo de checagem inatividade: 1 a 10 minutos
  • Mensagem de retorno: enviada ao operador humano quando o cliente voltar a ficar online. Se estiver em branco, uma mensagem padrão será utilizada.

  

• Redefinir configurações: restaura as configurações padrão do "WebChat".

• Salvar: aplica e salva todas as alterações feitas.

Snippet de publicação

Abaixo, mostraremos como você pode incorporar o "Webchat" no seu site. A configuração escolhida nesta seção:

Alterará o código de incorporação exibido abaixo. Selecione a versão desejada, defina o tipo de janela e copie o código correspondente.

💡 Dica: Para que o seu WebChat funcione corretamente, você deve copiar os links abaixo e colar, todos eles, na página que será realizada a instalação.

Modo Janela

Implementação Básica

Cole na tag Head do seu código

<!-- HEAD -->
<script src="https://cdn.boteria.com.br/webchat.js"></script>

Cole na tag Body do seu código

<!-- BODY -->
<script>
window.renderBotWidget("65c11777776343f36b748f6e");
</script>

Implementação completa (Opcional)

Caso queira passar informações específicas para o fluxo do bot, use esta versão:

Cole na tag Head do seu código

<!-- HEAD -->
<script src="https://cdn.boteria.com.br/webchat.js"></script>

Cole na tag Body do seu código

<!-- BODY -->
<script>
window.renderBotWidget(
    "65c11777776343f36b748f6e",
    {
        // Variáveis da sessão
        "variavel_1": "exemplo1",
        "variavel_2": "exemplo2",
        
        // Configurações de layout do webchat
        layout: {
            "bot-name": "Assistente Virtual",      // Nome do bot
            "bot-bg-color": "2f2f2f",              // Cor de fundo da mensagem do bot
            "bot-text-color": "ffffff",            // Cor do texto da mensagem do bot
            "user-bg-color": "6a5a37",             // Cor de fundo da mensagem do usuário
            "user-text-color": "ffffff",           // Cor do texto da mensagem do usuário
            "suggestion-width-auto": "true"          // Define o layout dos botões de sugestão
        }
    },
    false,  // Reiniciar sessão se parâmetros alterados
    false   // ID customizado do elemento HTML
);
</script>

Funcionalidades Avançadas

1. Atribuição de Variáveis

Permite que o fluxo do bot já inicie com variáveis pré-estabelecidas, personalizando a experiência do usuário desde o primeiro contato.

Como usar:

window.renderBotWidget("65c11777776343f36b748f6e", {
    "nome_usuario": "João Silva",
    "cpf": "123.456.789-00",
    "email": "joao@exemplo.com",
    "produto_interesse": "Seguro Auto"
});

Exemplo prático: Se você tem um site de seguros e já sabe que o usuário está interessado em "Seguro Auto", o bot pode começar a conversa já sabendo dessa informação.

2. Personalização de Layout

Permite alterar as configurações visuais do WebChat diretamente no código, sobrescrevendo as configurações do painel administrativo.

Como usar:

window.renderBotWidget("65c11777776343f36b748f6e", {
    layout: {
        "bot-name": "Assistente Virtual",
        "bot-bg-color": "2f2f2f",      // Fundo das mensagens do bot
        "bot-text-color": "ffffff",    // Cor do texto do bot
        "user-bg-color": "6a5a37",     // Fundo das mensagens do usuário
        "user-text-color": "ffffff"    // Cor do texto do usuário
    }
});

Exemplo prático: Dois setores de uma empresa que usam o mesmo bot, porém possuem identidades visuais diferentes, podem personalizar apenas sua instância, sem modificar as configurações originais do painel.

3. Controle de Sessão

O terceiro parâmetro (false por padrão) controla se a sessão deve ser reiniciada quando os parâmetros são alterados.

Como usar:

// Reinicia a sessão se parâmetros mudarem
window.renderBotWidget("65c11777776343f36b748f6e", {
    "usuario": "João"
}, true);

// Mantém a sessão mesmo com parâmetros diferentes
window.renderBotWidget("65c11777776343f36b748f6e", {
    "usuario": "Maria"
}, false);

4. Posicionamento Customizado

O quarto parâmetro permite especificar um ID de elemento HTML existente onde o webchat será renderizado, ao invés de criar uma nova div.

Como usar:

<!-- Crie uma div onde você quer que o chat apareça -->
<div id="meu-chat-customizado"></div>

<script>
// Use o ID da div como quarto parâmetro
window.renderBotWidget("65c11777776343f36b748f6e", {}, false, "meu-chat-customizado");
</script>

Exemplo prático:

<!-- Chat integrado na sidebar -->
<div class="sidebar">   
    <h3>div chat-sidebar</h3>
    <div id="chat-sidebar"></div>
</div>

<script>
window.renderBotWidget("65c11777776343f36b748f6e", {}, false, "chat-sidebar");
</script>

Resultado:

Modo Tela Cheia

Para implementar seu WebChat em modo tela cheia, você precisará usar um iframe em seu código.

Implementação Básica

Insira o iframe abaixo dentro da div desejada.

<iframe src="https://webchatv2.boteria.com.br/65c11777776343f36b748f6e"></iframe>

Implementação completa (Opcional)

Para a implementação completa do WebChat em tela cheia, o cliente precisará construir a URL inserida no iframe de acordo com os atributos desejados.

Como Construir a URL

A estrutura da URL segue o padrão:

Onde:

Código do bot: ID único do seu bot (ex: 65c11777776343f36b748f6e)

Chave: Nome da variável (ex: nome_cliente, cpf, bot-name)

Valor: Conteúdo da variável (ex: João Silva, 12345678912)

Separador: Use & para adicionar múltiplos parâmetros

💡 Dica: Todas as variáveis passadas na URL ficam disponíveis durante toda a conversa e podem ser utilizadas no fluxo do bot.